<template>
  <view :class="classArr">
    <!-- 头部 -->
    <view v-if="modelData.showCaption" :class="[ns.b('header')]" @click="changeCollapse">
      <view :class="[ns.be('header', 'left')]">
        <view :class="[ns.e('caption'), ...controller.labelClass]">{{ captionText }}</view>
      </view>
      <view :class="[ns.be('header', 'right')]">
        <uni-icons
          v-if="modelData.titleBarCloseMode !== undefined && modelData.titleBarCloseMode !== 0"
          :type="isCollapse ? 'right' : 'down'"
          size="18"
        ></uni-icons>
      </view>
    </view>
    <!-- 内容 -->
    <view :class="[ns.b('content')]">
      <IBizRow :layout="modelData.layout">
        <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
          <IBizCol :layoutPos="modelData.layoutPos" :state="controller.state">
            <!-- #ifdef H5 -->
            <slot :name="panelItem.id"></slot>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN-->
            <slot name="{{panelItem.id}}"></slot>
            <!-- #endif  -->
          </IBizCol>
        </template>
      </IBizRow>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useNamespace } from '@/use'
import { IPanelContainer } from '@ibiz/model-core'
import { computed, ref, VNode } from 'vue'
import { PanelContainerGroupController } from './i-biz-panel-container-group.controller'

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelContainerGroupController,
    required: true,
  },
})

const ns = useNamespace('panel-container-group')

const isCollapse = ref(!props.controller.defaultExpansion)

const changeCollapse = (): void => {
  if (!props.controller.disableClose) {
    isCollapse.value = !isCollapse.value
  }
}

const captionText = computed(() => {
  const { captionItemName, caption, capLanguageRes } = props.modelData
  if (captionItemName) {
    return props.controller.data[captionItemName]
  }
  let text = caption
  if (capLanguageRes) {
    text = ibiz.i18n.t(capLanguageRes.lanResTag!, caption)
  }
  return text
})

const classArr = computed(() => {
  const classNames = [ns.b(), ns.m(props.modelData.id)]
  if (props.controller) {
    classNames.push(
      ...props.controller.containerClass,
      ns.is('hidden', props.controller.state && !props.controller.state.visible),
    )
  }
  if (props.modelData.showCaption === true) {
    classNames.push(ns.m('show-header'))
    classNames.push(ns.b('collapse'))
    classNames.push(ns.is('collapse', isCollapse.value))
    if (props.controller && props.controller.disableClose) {
      classNames.push(ns.bm('collapse', 'disable-close'))
    }
  }
  return classNames
})
</script>
<style lang="scss">
@import './i-biz-panel-container-group';
</style>
